<template>
  <el-dialog :close-on-click-modal="false" :before-close="handleBeforeClose" :visible="true" :title="title" width="60%">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="160px" :disabled="disabled">
      <el-form-item label="弹射高度">
        <el-select
          v-model="form.tsgd"
          placeholder="请选择"
          clearable
          style="width: 100%;"
        >
          <el-option
            v-for="[key, value] in tsgdOptions"
            :key="value"
            :label="value"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="特情模拟">
        <el-select
          v-model="selectedMntq"
          placeholder="请选择"
          multiple
          filterable
          clearable
          style="width: 100%;"
        >
          <el-option
            v-for="[key, value] in mntqOptions"
            :key="value"
            :label="value"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="弹射动作评定">
        <!-- <el-input v-model="form.tsdz" style="width: 370px;" /> -->
        <el-row>
          <span class="tsdz">弹射时机的判断</span>
          <el-radio-group v-model="tsdzTssj" size="small">
            <el-radio label="1">正确</el-radio>
            <el-radio label="0">错误</el-radio>
          </el-radio-group>
        </el-row>
        <el-row>
          <span class="tsdz">两腿收回脚蹬紧</span>
          <el-radio-group v-model="tsdzLtsh" size="small">
            <el-radio label="1">正确</el-radio>
            <el-radio label="0">错误</el-radio>
          </el-radio-group>
        </el-row>
        <el-row>
          <span class="tsdz">臀部后移背靠紧</span>
          <el-radio-group v-model="tsdzBbhy" size="small">
            <el-radio label="1">正确</el-radio>
            <el-radio label="0">错误</el-radio>
          </el-radio-group>
        </el-row>
        <el-row>
          <span class="tsdz">肌肉紧缩头靠紧</span>
          <el-radio-group v-model="tsdzJrjs" size="small">
            <el-radio label="1">正确</el-radio>
            <el-radio label="0">错误</el-radio>
          </el-radio-group>
        </el-row>
        <el-row>
          <span class="tsdz">咬牙闭眼臂夹紧</span>
          <el-radio-group v-model="tsdzYyby" size="small">
            <el-radio label="1">正确</el-radio>
            <el-radio label="0">错误</el-radio>
          </el-radio-group>
        </el-row>
        <el-row>
          <span class="tsdz">头身两腿要正直</span>
          <el-radio-group v-model="tsdzTslt" size="small">
            <el-radio label="1">正确</el-radio>
            <el-radio label="0">错误</el-radio>
          </el-radio-group>
        </el-row>
      </el-form-item>
      <el-form-item label="建议措施">
        <el-select
          v-model="selectedJycs"
          multiple
          filterable
          clearable
          placeholder="请选择"
          style="width: 100%;"

        >
          <el-option
            v-for="[key, value] in jycsOptions"
            :key="value"
            :label="value"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="其他建议">
        <el-input type="textarea" v-model="qtjy" />
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="评定结果">
            <el-select
              v-model="form.result"
              placeholder="请选择">
              <el-option
                v-for="[key, value] in resultOptions"
                :key="value"
                :label="value"
                :value="key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="记录人">
            <el-input v-model="form.createBy" style="width: 370px;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="记录日期" prop="date">
            <el-date-picker v-model="form.date" :picker-options="pickerOptions" type="date" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>

    </div>
  </el-dialog>
</template>

<script>
import {get, edit, add} from '@/api/trainTslj'

import { TSGD,TSLJ_JYCS, TSLJ_MNTQ, RATE_RESULTS} from '@/utils/constants'


const defaultForm = { id: null, trainId: null, trainItemId: null, tsgd: null, mntq: null, tsdz: null, jycs: null, result: null, date: null, createBy: null, }

export default {
  name: 'TsljDialog',

  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    }
  },
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      form: { ...defaultForm },
      title: '弹射离机训练',
      rules: {
        createBy: [{ required: true, message: '请输入记录人', trigger: 'blur' }],
        date: [{ required: true, message: '请选择记录日期', trigger: 'blur' }]
      },
      tsdzTssj: null,
      tsdzLtsh: null,
      tsdzBbhy: null,
      tsdzJrjs: null,
      tsdzYyby: null,
      tsdzTslt: null,
      qtjy: null,
      selectedMntq: [],
      selectedJycs: [],
      tsgdOptions: TSGD,
      mntqOptions: TSLJ_MNTQ,
      jycsOptions: TSLJ_JYCS,
      resultOptions: RATE_RESULTS,
      isLoading: false // 提交按钮的加载状态
    };
  },
  methods: {
    emit: function(event) {

    },
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      if (done) {
        done(); // 调用done()来关闭对话框        
      }
    },
    handleCommit() {
      this.form.tsdz = [this.tsdzTssj, this.tsdzLtsh, this.tsdzBbhy, this.tsdzJrjs, this.tsdzYyby, this.tsdzTslt].join('|');
      this.form.mntq = this.selectedMntq.join('|');
      this.form.jycs = this.selectedJycs.join('|') + '|' + this.qtjy;
      console.log(this.form);
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isLoading = true; // 提交按钮的加载状态
          this.form.trainId = this.trainId;
          this.form.trainItemId = this.itemId;
          if (this.form.id == null) {
            add(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          } else {
            edit(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          }
        }
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  },
  created() {
    console.log(this.trainId, this.itemId);
    if (this.trainId !== -1) {
      this.shouldUpdate = false;

      get(this.trainId, this.itemId).then(response => {
        this.form = Object.assign(this.form, response);
        this.selectedMntq = this.form.mntq.split('|').map(id => parseInt(id));
        [this.tsdzTssj, this.tsdzLtsh, this.tsdzBbhy, this.tsdzJrjs, this.tsdzYyby, this.tsdzTslt] = this.form.tsdz.split('|');
        const jycs = this.form.jycs.split('|');
        this.selectedJycs = jycs.slice(0, -1).map(id => parseInt(id));
        this.qtjy = jycs[jycs.length - 1];
        console.log(response, this.form);

      });
    }
  },
  updated() {
  },
  mounted() {
  }
}
</script>

<style scoped>
.tsdz {
  font-weight: bold;
  color: rgb(13, 106, 187);
  margin-right: 16px;
}

</style>